<script setup>typeList1
import { useCounterStore } from "../../pain/login/login";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const active = ref(20);
const active1 = ref(0);
const active2 = ref(0);
const listss = reactive([]);
const Notice = ref("");
const member = ref("1");
const vipLevel = ref(); //会员级别
const tabName = ref(); //默认六度·标准版
const collects = ref("false"); //是否收藏
const centerDialogVisible = ref(false);
const centerDialogVisible1 = ref(false);
const { isShowDrawer } = storeToRefs(store);
const project_progress = ref();


// const element = ref()
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { timestamp, timestamp1, type_status, diqu } from "@/utils/index";
import { getCaricatureApi } from "@/Api/shoop/index.js";
import domData from "@/utils/json/dom.json";
import { ElMessage, ElMessageBox } from "element-plus";
import { money } from "@/utils/index.js";
import Fot from "../../components/fotter/index.vue";
import printJS from "print-js";
import {
  memberPrice,
  exportPost,
  collect,
  cancelFavorite,
  bookmark,
  newProcessing,
  processingList,
  Bxsubscription,
  edit,
  detail,
  memberPrices,
  contact_img,
  complete,
  infoid_read,
  detail_content,
} from "../../Api/complete/index.js";
// import { searchDetails } from "../../Api/searchInfo/searchInfo.js";
import { useRouter } from "vue-router";
import axios from "axios";
import { userInfo } from '@/Api/api.js'
import { useWindowScroll } from "@vueuse/core";
// import { timestamp, diqu } from "@/utils/index";
// import type { FormInstance, FormRules } from 'element-plus';
const aTags = ref([]);

const ruleForm = reactive({
  note: "",
});
const rules = reactive({
  type: [
    {
      type: "array",
      required: true,
      message: "请选择处理状态",
      trigger: "change",
    },
  ],
});
const qxVip = () => {
  centerDialogVisible1.value = false;
};
window.scrollTo({
  top: 560,
  left: 0,
  behavior: "smooth",
});
const kfimg = ref("");
contact_img().then((res) => {
  if (res.data.code == 1) {
    kfimg.value = "https://api.6ocbx.com/" + res.data.data.img;
  } else {
    ElMessage.error(res.data.msg);
  }
});
//项目进度跳转详情
const Jumpaa = (event) => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    const href = router.resolve({
      path: `/searchInfo`,
      query: {
        id: event,
        // name: event,
      },
    });
    window.open(href.href, "_blank");
    // router.push({
    // path: '/searchInfo',
    // query: {
    //       // id: event,
    //     },
    // });

  }
};
const router = useRouter();
function updateMeta() {
  // 获取当前路由的copy
  const currentRoute = router.currentRoute.value;
  // 修改meta对象
  currentRoute.meta.title = "hhahahaa";

  // 注意：这里并不会改变路由本身的meta，因为它是只读的。
  // 如果你需要更新路由的定义，你可能需要重新导航到当前路由或重新添加路由。
  // 例如，你可以通过push方法来导航到当前路由，并且传递新的meta信息：
  // router.push({ path: currentRoute.path, meta: currentRoute.meta });
}

// return { updateMeta }
const route = useRouter();
const id = route.currentRoute.value.query.id;
console.log(id);
import CryptoJS from "crypto-js";
const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse("53c5a64c6be84e97"); //十六位十六进制数作为密钥偏移量
const token = localStorage.getItem("token");
//解密
function decrypt(text) {
  var result = CryptoJS.AES.decrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  return result.toString(CryptoJS.enc.Utf8);
}
// console.log(decrypt('Kr5PbonssXZ0Ce8SYO5naLIK9hDgKNTF0zNTBDeBE4a1aSdM8HlEGQf2nJV++r/c4gADzhahBEBxIw3KWw7LYD8rJu+vtRELieHOIVl6L4kUx09KcQimJRKjgVYaOrk9Zbn17zfhGzWXUBjyAMwE5xxzDyAyNo3dNonrCPd1NzjiNCh//AoeJgZZFeXBM7BtKYyYeZfAQX3SEhtToSLhlgVPmnrwsLXi4wynw6BVo5aQPMAW1FSx9v527fNFh6IjOtE3h0lNfqXSsAKFK4RGQ3xeZzcb1x6zTBfudIhC11RqDEa3l4zwpBpdojuKJSAZ'));
let ids

if (token) {
  userInfo().then(rex => {
    ids = rex.data.data
    const id_s = ref(0);
    const clientid = ref(0);
    id_s.value = ids.level_id;
    vipLevel.value = ids.level_id;
    clientid.value = ids.clientid;
    processingList1();
    sfcollects();
    
    
  })
} else {
  // store.uselogin = true
}

// import { onMounted } from 'vue'
const data = reactive({
  oldScrollTop: 0,
});
// const scrolling = () => {
//   // 滚动条距文档顶部的距离
//   let scrollTop =
//     window.pageYOffset ||
//     document.documentElement.scrollTop ||
//     document.body.scrollTop;
//   // 滚动条滚动的距离
//   let scrollStep = scrollTop - data.oldScrollTop;
//   // 更新——滚动前，滚动条距文档顶部的距离
//   data.oldScrollTop = scrollTop;


onMounted(() => {
  // updateMeta()

});
// onUnmounted(() => {
//   document.title = aaa;
// });
const imgList = reactive([
  { url: new URL(`../../assets/img/3.png`, import.meta.url).href, id: 2 },
  { url: new URL(`../../assets/img/2.png`, import.meta.url).href, id: 3 },
  {
    url: new URL(`../../assets/img/蒙版组 4@2x.png`, import.meta.url).href,
    id: 4,
  },
  {
    url: new URL(`../../assets/img/蒙版组 5@2x.png`, import.meta.url).href,
    id: 5,
  },
  {
    url: new URL(`../../assets/img/蒙版组 6@2x.png`, import.meta.url).href,
    id: 6,
  },
]);
// const gaoji1 = ref()
// const Vip1 = ref()
const putong1 = ref();
// const gaoji2 = ref()
// const Vip2 = ref()
const putong2 = ref();

//标准版缩小显示的价格
const putong = () => {
  const from1 = reactive({
    level_id: memberId.value,
  });
  memberPrices(from1).then((res) => {
    res.data.data.forEach((item) => {
      if (item.num == 1 && item.type == "q" && item.unit == "m") {
        putong2.value = Math.floor(item.price);
      } else if (item.num == 1 && item.type == "q" && item.unit == "y") {
        putong1.value = Math.floor(item.price);
      }
    })
  });
};
// const putong =() =>{
const from1 = reactive({
  level_id: 2,
});
memberPrices(from1).then((res) => {
  res.data.data.forEach((item) => {
    if (item.num == 1 && item.type == "q" && item.unit == "m") {
      putong2.value = Math.floor(item.price);
    } else if (item.num == 1 && item.type == "q" && item.unit == "y") {
      putong1.value = Math.floor(item.price);
    }
  })
  // putong1.value = Math.floor(res.data.data[1].price);
  // putong2.value = Math.floor(res.data.data[0].price);
});
// };
// gaoji()
// VIP()
// putong()
const gongsi2 = (event) => {

  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    const href = router.resolve({
      path: "/disposition",
      query: {
        id: 7,
        name: event,
      },
    });
    window.open(href.href, "_blank");
  }
};
const gongsi1 = (event) => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      const href = router.resolve({
        path: "/disposition",
        query: {
          id: 3,
          name: event,
        },
      });
      window.open(href.href, "_blank");
    }
  }
};
const gongsi3 = (event) => {
  if (!token) {
    return store.uselogin = true;
  }
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    const href = router.resolve({
      path: "/disposition",
      query: {
        id: 2,
        name: event,
      },
    });
    window.open(href.href, "_blank");
  }
};
// 订阅
const dingyue = (event) => {

  if (!token) {
    store.uselogin = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      const form = reactive({
        clientid: ids.clientid,
        type_id: 2,
        kewords: event,
        token: token
      });
      Bxsubscription(form).then((res) => {
        if (res.data.code == 1) {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  }
  // if ( !token && limits.value == 1) {
  //     centerDialogVisible1.value = true;
  //   }else if( limits.value == 0){
  //      console.log(limits.value);
  //      store.uselogin = true;
  //   }else {

  //   }
};
//跳转企业分析
const qyfx = (event) => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      const href = router.resolve({
        path: "/companyanalysis",
        query: {
          name: event,
        },
      });
      window.open(href.href, "_blank");

    }
  }
};
//打印
// const form6 = reactive({
//   nid: id,
// });
// exportPost(form6).then((res) => {
// });
//单选
// const type_id = ref()
const typeJump = (event) => {
  active2.value = event.type_id;
};
const tss = () => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      window.open(info_url.value);
    }
    // router.push({
    //   path: "/search",
    // });
  }
};
//导出
const exportJump = () => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      window.open(`https://api.6ocbx.com/read/export?nid=${id}`);
    }
  }
};
//打印
const print = () => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  }
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  }
  // $printJS({printable: 'elementId',type: 'html', : ['*']})
  // window.print(Notice.value )
  // const wrap = document.getElementById("tz1");
  // wrap.style = "position: absolute;top: 10px;min-height: 0px !important;"
  // document.getElementById("app").style.display = 'none';
  // window.print()
};
//请求处理列表
const type_id = ref();
const note = ref();
const typeList = reactive([
  { type_id: 1, title: "联系中" },
  { type_id: 2, title: "已投标" },
  { type_id: 3, title: "已合作" },
  { type_id: 4, title: "放弃" },
  { type_id: 5, title: "不相关" },
  { type_id: 6, title: "已中标" },
  { type_id: 7, title: "未中标" },
]);
const typeList1 = reactive({});
const processingList1 = () => {
  const form5 = reactive({
    nid: id,
    clientid: ids.clientid,
    // type_id: 2
  });
  processingList(form5).then((res) => {
    if (res.data.code == 1) {
      typeList1.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};


//新建处理
const status_1 = ref();
const status = ref();
const modifyId = ref();
const dialogTit = ref("新建处理");
const xjcl = () => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      status_1.value = 1;
      centerDialogVisible.value = true;
      active2.value = "";
      ruleForm.note = "";
    }
  }
};
const modify = (event) => {
  dialogTit.value = "修改处理";
  modifyId.value = event.id;
  status_1.value = 0;
  centerDialogVisible.value = true;
  // active2.value=event.type_status
  ruleForm.note = event.note;
  typeList.forEach((element) => {
    if (element.type_id == event.type_status) {
      status.value = element.title;
    }
  });
};

//修改确定
const qued1 = () => {
  centerDialogVisible.value = false;
  // ruleForm.
  const form = reactive({
    id: modifyId,
    note: ruleForm.note,
  });
  edit(form).then((res) => {
    if (res.data.code == 1) {
      processingList1();
      // typeList1.value = res.data.data
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
// 新增确定
const qued = () => {
  if (!token && limits.value == 0) {
    store.uselogin = true;
  } else {
    centerDialogVisible.value = false;
    const form = reactive({
      nid: id,
      clientid: ids.clientid,
      type_id: active2.value,
      note: ruleForm.note,
    });
    newProcessing(form).then((res) => {
      if (res.data.code == 1) {
        processingList1();
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  }
};
// const scrollToAnchor = () =>{
const getClass = (item) => {
  const index = project_progress.value.indexOf(item); // 获取当前项在数组中的索引位置
  if (project_progress.value.length - 1 == index) {
    return `lastOne`;
  } else {
    // if (project_progress.value.length-1==index) {
    return `imgss`;
    // }
  }

  // if (index==project_progress.value.length-1) {
  //   return `lastOne`
  // }
};
// }
//判断是否收藏
const sfcollects = () => {
  if (!token && limits.value == 0) {
    store.uselogin = true;
  } else {
    const form4 = reactive({
      nid: id,
      clientid: ids.clientid,
    });
    bookmark(form4).then((res) => {
      if (res.data.code == "1") {
        if (res.data.data.is_coll == "1") {
          collects.value = "true";
        } else if (res.data.data.is_coll == "2") {
          collects.value = "false";
        }
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  }
};
if (token) {

}
//收藏
const collectJump = () => {
  // if (limits.value == 1) {
  //   centerDialogVisible1.value = true;
  // } else {
  if (token) {
    // console.log(token);
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      const form = reactive({
        nid: id,
        clientid: ids.clientid,
      });
      collect(form).then((res) => {
        if (res.data.code == 1) {
          collects.value = "true";
          ElMessage.success(res.data.msg);
          sfcollects();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  } else {
    store.uselogin = true;
  }

  // }
};
//取消收藏
const FavoriteJump = () => {
  if (token) {
    if (limits.value == 1) {
      centerDialogVisible1.value = true;
    } else {
      const form = reactive({
        nid: id,
        clientid: ids.clientid,
        token: token
      });
      cancelFavorite(form).then((res) => {
        if (res.data.code == 1) {
          collects.value = "false";
          ElMessage.success(res.data.msg);
          sfcollects();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  } else {
    store.uselogin = true;
  }
};
complete().then((res) => {
  res.data.data.forEach((item, index) => {
    if (item.id == 2) {
      tabName.value = item.name;
    }
    if (item.id !== 1) {
      memberList.push(item);
    }
  });
  memberList.forEach((item) => {
    item.url = 0;
    imgList.forEach((element) => {
      if (item.id == element.id) {
        item.url = element.url;
      }
    });
  });
});
const memberList = reactive([
  // {
  //   id: 2,
  //   name: "六度·标准版",
  //   notes: "",
  //   weigh: 2,
  //   is_del: 0,
  //   createtime: 1702362539,
  //   updatetime: 1702362539,
  // },
  // {
  //   id: 3,
  //   name: "六度·高级版",
  //   notes: "",
  //   weigh: 3,
  //   is_del: 0,
  //   createtime: 1702363173,
  //   updatetime: 1702363173,
  // },
  // {
  //   id: 4,
  //   name: "六度·VIP",
  //   notes: "",
  //   weigh: 4,
  //   is_del: 0,
  //   createtime: 1702363187,
  //   updatetime: 1702363187,
  // },
  // {
  //   id: 5,
  //   name: "六度·定制版",
  //   notes: "",
  //   weigh: 5,
  //   is_del: 0,
  //   createtime: 1702363207,
  //   updatetime: 1705662382,
  // },
]);
//详情公告内容
const xqPost = () => {
  const form = ref({
    nid: id,
  });
  detail_content(form.value).then((res) => {
    console.log(res.data.data);
    if (res.data.code == 1) {
      Notice.value = res.data.data.content;
      info_url.value = res.data.data.info_url;
    }
  });
}
xqPost();
const form = reactive({
  level_id: 2,
});
const a1 = ref();
const a2 = ref();
const a3 = ref();
const a4 = ref();
const a5 = ref();
const a6 = ref();
const a7 = ref();
const a8 = ref();
const a9 = ref();
const a10 = ref();
const a11 = ref();
const city = ref();
const info_url = ref();

const a12 = ref();
const a13 = ref();
// domData.forEach

// const a7 = ref()
const searchInfo = () => {
  const form = ref({
    nid: id,
    // level_id: a,
    // token: b,
  });
  // console.log(id);
  detail(form.value).then((res) => {
    if (res.data.data.list.length !== 0) {
      info_url.value = res.data.data.info_url;
      listss.value = res.data.data.list;
      document.title = listss.value[0].title;
      a1.value = res.data.data.list[0].xmdw;
      a2.value = res.data.data.list[0].xmlx;
      a3.value = res.data.data.list[0].xmdh;

      a4.value = res.data.data.list[0].dldw;
      a5.value = res.data.data.list[0].dllx;
      a6.value = res.data.data.list[0].dldh;

      // a7.value = res.data.data.list[0].zbdw;
      var a = typeof res.data.data.list[0].zbdw;
      if (a == "string") {
        a7.value = res.data.data.list[0].zbdw;
      } else {
        if (res.data.data.list[0].zbdw == null) {
          a7.value = res.data.data.list[0].zbdw;
        } else {
          a7.value = res.data.data.list[0].zbdw[0];
        }
      }
      a8.value = res.data.data.list[0].zblx;
      a9.value = res.data.data.list[0].zbdh;
      a10.value = res.data.data.list[0].infoid;
      a11.value = res.data.data.list[0].provinceid;
      a12.value = res.data.data.list[0].wjTime;
      a13.value = res.data.data.list[0].bjTime;
      project_progress.value = res.data.data.project_progress;
      // if (res.data.data.project_progress) {
      //   if (res.data.data.project_progress.length <= 1) {
      //   project_progress.value = [];
      // } else {
      //   project_progress.value = res.data.data.project_progress;
      // }
      // }
      permissions()
    } else {
      list.value = res.data.data.list;
    }

    domData.forEach((element) => {
      if (element.adcode == a11.value) {
        city.value = element.label;
        // item.url = element.url;
      }
    });
  });
};
searchInfo();
//根据会员等级
const limits = ref()
const permissions = () => {
  const form = reactive({
    infoid: a10.value
  })
  infoid_read(form).then((res) => {
    if (token) {
      var a = ids.level_id
    } else {
      var a = 0
    }
    //  const arra =  "0, 1 ,2,3,4 "
    if (res.data.data !== null) {
      const arr = res.data.data.qxdata.split(",");
      if (arr.indexOf(a.toString()) == '-1') {

        limits.value = 1
        if (token == null && limits.value == 1) {
          store.uselogin = true;
        }
      } else {

        limits.value = 0
        console.log(limits.value);
        if (token == null && limits.value == 1) {
          store.uselogin = true;
        }
      }
    }

  })
}


// infoid转码
const ggao = ref();
const information = ref([]);
getCaricatureApi().then((res) => {
  information.value = res.data.data;
});
const infoids = (event) => {
  var a = null;
  information.value.forEach((element) => {
    if (element.infoid == event) {
      a = element.infoname;
    }
  });
  return a;
};

//跳转会员支付页面
const Jumpvip = () => {
  if (limits.value == 1) {
    centerDialogVisible1.value = true;
  } else {
    const href = router.resolve({
      path: "/memberPayment",
    });
    window.open(href.href, "_blank");
  }
  // router.push({
  //   path: "/memberPayment",
  // });
};

const handleClick = (event) => {
  memberId.value = event.id;
  tabName.value = event.name;
  putong();
};
// 会员购买对应的价格
const price = reactive([]); //会员价格
const postMemberPrice = () => {
  const form = reactive({
    level_id: memberId.value,
  });
  memberPrice(form).then((res) => {
    if (res.data.code == 1) {
      price.value = res.data.data;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//接受参数

// route.params.id
const form1 = reactive({
  level_id: 2,
});
memberPrice(form1).then((res) => {
  if (res.data.code == 1) {
    price.value = res.data.data;
  } else {
    ElMessage.error(res.data.msg);
  }
});
const memberId = ref(0);
const changeStatus = (number) => {
  // active.value = number.id;
  active.value = number;
};
const changeStatus1 = (number) => {
  active1.value = number;
};


const activeName = ref("1");
const scrollbar = ref(null);
const showBackToTop = ref(false);
</script>

<template>
  <el-scrollbar ref="scrollbar" @scroll.native="handleScroll">
    <div class="box">
      <!-- <el-button text @click="dialogVisible = true">
      click to open the Dialog
    </el-button> -->
      <div class="details">
        <div class="details-top">
          <div>
            <img src="../../assets/newimg/4072.png" alt="" class="ioc" />
            <span style="vertical-align: middle; margin-left: 20px">公告详情</span>
          </div>
          <div class="titlesss"></div>
          <div class="daochu">
            <div class="dc-ioc" @click="exportJump()">
              <img src="../../assets/img/路径 4058@2x.png" alt="" />
              <p>导出PDF</p>
            </div>
            <div class="dc-ioc" @click="print()" v-if="limits == 1">
              <!-- <div class="dc-ioc" @click="print()"> -->
              <img src="../../assets/img/组 4759@2x.png" alt="" />打印{{ id_s }}
            </div>
            <div class="dc-ioc" onclick="printJS('textNotice', 'html')" v-else>
              <!-- <div class="dc-ioc" @click="print()"> -->
              <img src="../../assets/img/组 4759@2x.png" alt="" />打印{{ id_s }}
            </div>

            <div class="dc-ioc" @click="collectJump()" v-if="collects === 'false'">
              <img src="../../assets/img/路径 4068@2x.png" alt="" />收藏
            </div>
            <div class="dc-ioc" @click="FavoriteJump()" v-else style="color: #fe8d03">
              <img src="../../assets/img/组 5596.png" alt="" />已收藏
            </div>
          </div>
        </div>
        <div class="details-conten" v-for="item in listss.value">
          <div class="details-a">
            <div class="details-tb">{{ infoids(a10) }}</div>
            <div class="details-js">
              {{ item.title }}
            </div>
          </div>
          <div class="details-b">
            <div style="display: flex; width: 170px">
              <div class="sj">
                <img src="../../assets/img/组 4764@2x.png" alt="" />
              </div>
              <div class="sj-a">{{ timestamp1(item.release_time) }}</div>
            </div>
            <div style="display: flex; width: 115px; margin-right: 40px">
              <div class="sj">
                <img src="../../assets/img/路径 4071@2x.png" alt="" />
              </div>
              <div class="sj-a">{{ city }}</div>
            </div>
            <div style="display: flex">
              <div class="sj">
                <img src="../../assets/img/组 4768@2x.png" alt="" />
              </div>
              <div class="sj-a" style="font-size: 14px; font-weight: 400; color: #fe8d03">
                {{ money(item.jg) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 项目处理进度 -->
      <!-- <div class="progress">
      <div class="information-top">
          <div
            style="
              width: 4px;
              height: 16px;
              background-color: #F43107;
              margin-left: 40px;
            "
          ></div>
          <div class="jb" id="tz1">项目处理进度</div>
        </div>
    </div> -->
      <!-- <div @click="aaaaa()">78956545</div> -->
      <div class="container" id="aaa">
        <div class="tabs tiaozhuan" ref="myElement" @scroll="handleScroll">
          <el-tabs @change="callback" v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
              <template #label>
                <a href="#aaa">基本信息</a>
              </template>
            </el-tab-pane>
            <el-tab-pane label="项目进度" name="2">
              <template #label>
                <a href="#bbb">项目进度</a>
              </template>
            </el-tab-pane>
            <el-tab-pane label="公告正文" name="3">
              <template #label>
                <a href="#ccc">公告正文</a>
              </template>
            </el-tab-pane>
            <el-tab-pane label="项目处理进度" name="4">
              <template #label>
                <a href="#ddd">项目处理进度</a>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="informations">
          <!-- <div id="aaa" style="height: 30px;"></div> -->
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb" id="tz1">基本信息</div>
            <div class="feedback">
              <div class="ywlj" @click="tss()" v-if="info_url">
                原文链接（跳转发布源）
              </div>
              <!-- 数据错误反馈 -->
            </div>
          </div>
          <div class="table">
            <div class="table-td">
              <div class="td-1">招标公司</div>
              <div class="td-2 xhx">
                <div @click="gongsi1(a1)"> {{ a1 }}</div>
                <div class="td-2-1" @click.stop="qyfx(a1)" v-if="a1 !== ''">
                  <img src="../../assets/newimg/组 5105@2x.png" alt="" />
                </div>
                <div class="td-2-2" @click.stop="dingyue(a1)" v-if="a1 !== ''">
                  <img src="../../assets/newimg/组 5104@2x.png" alt="" />
                </div>
              </div>
              <div class="td-1">招标联系人</div>
              <div class="td-2">{{ a2 }}&nbsp;&nbsp;{{ a3 }}</div>
            </div>
            <div class="table-td">
              <div class="td-1">招标代理机构</div>
              <div class="td-2 xhx">
                <div @click="gongsi2(a4)"> {{ a4 }}</div>
                <div class="td-2-1" v-if="a4 !== ''">
                  <img src="../../assets/newimg/组 5105@2x.png" alt="" />
                </div>
                <div class="td-2-2" @click.stop="dingyue(a4)" v-if="a4 !== ''">
                  <img src="../../assets/newimg/组 5104@2x.png" alt="" />
                </div>
              </div>
              <div class="td-1">代理联系人</div>
              <div class="td-2">{{ a5 }}&nbsp;&nbsp;{{ a6 }}</div>
            </div>
            <div class="table-td" v-if="a10 == 11">
              <div class="td-1">中标公司</div>
              <div class="td-2 xhx">
                <div @click="gongsi3(a7)"> {{ a7 }}</div>
                <div class="td-2-1" v-if="a7 !== null">
                  <img src="../../assets/newimg/组 5105@2x.png" alt="" />
                </div>
                <div class="td-2-2" @click.stop="dingyue(a7)" v-if="a7 !== null">
                  <img src="../../assets/newimg/组 5104@2x.png" alt="" />
                </div>
                <!-- <div class="td-2-1"></div>
                <div class="td-2-2"></div> -->
              </div>
              <div class="td-1">中标联系人</div>
              <div class="td-2">{{ a8 }}&nbsp;&nbsp;{{ a9 }}</div>
            </div>
            <div class="table-td" v-if="a10 == 9">
              <div class="td-1">标书获取时间</div>

              <div class="td-2" v-if="a12 == 0"></div>

              <div class="td-2" v-else>{{ timestamp(a12) }}</div>

              <div class="td-1">标书截止时间</div>

              <div class="td-2" v-if="a13 == 0"></div>

              <div class="td-2" v-else>{{ timestamp(a13) }}</div>
            </div>
            <div id="bbb" style="height: 1px"></div>
          </div>
        </div>
        <div></div>
        <!-- 项目进度 -->
        <div class="schedule" id="schedule">
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb" id="tz4">项目进度</div>
          </div>
          <div class="carousel">
            <div class="carousel-box" v-for="(item, index) in project_progress" :key="index">
              <div class="carousel-infoid">{{ infoids(item.infoid) }}</div>
              <div class="carousel-time">
                {{ timestamp(item.release_time) }}
              </div>
              <div class="carousel-tit" @click="Jumpaa(item.nid)">
                {{ item.title }}
              </div>
              <div :class="getClass(item)">
                <!-- <div class="imgss"> -->
                <img src="../../assets/newimg/路径 4603@2x.png" alt="" />
              </div>
              <div id="ccc"></div>
            </div>
          </div>
        </div>
        <!-- 公告正文 -->
        <div class="detailsTexts">
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb">公告正文</div>
          </div>
          <div class="vip_gg">
            <div class="vip_gz">跟踪记录</div>
            <div class="vip_top1">
              <div class="vip_top2">日期</div>
              <div class="vip_top2">版本</div>
              <div class="vip_top2">进展阶段</div>
              <div class="vip_top2">进展备注</div>
            </div>
            <div class="vip_gz">项目概况</div>
            <div class="table">
              <div class="table-td">
                <div class="td-1">行业分类</div>
                <div class="td-2">{{ infoids(a10) }}</div>
                <div class="td-1">项目地址</div>
                <div class="td-2">{{ city }}</div>
              </div>
              <div class="table-td">
                <div class="td-1">进展阶段</div>
                <div class="td-2"></div>
                <div class="td-1">投资金额</div>
                <div class="td-2"  v-for="item in listss.value">{{ money(item.jg) }}</div>
              </div>
              <div class="table-td">
                <div class="td-1" style="height: 70px;">项目概况</div>
                <div class="td-3" id="textNotice" v-html="Notice"></div>
              </div>
              <div class="table-td">
                <div class="td-1">所用设备</div>
                <div class="td-3" style="height: 50px;">水利水电</div>
              </div>
            </div>
            <div style="display: flex;justify-content:space-between">
              <div class="vip_gz">跟踪记录</div>
              <div style="margin-top: 16px;float: right;margin-bottom: 13px;">
                <el-button type="danger">历史采购记录</el-button>
                <el-button type="danger">历史供货商</el-button>
                <el-button type="danger">历史招标代理</el-button>
              </div>
            </div>
              <div class="table-td">
                <div class="td-1" style="height: 200px;line-height: 200px;">业主单位</div>
                <div class="td-3" style="height: 200px;padding: 18px 20px;">
                  <div style="display: flex;">
                    <div>名称：</div>
                    <div>方城县水利发展服务中心</div>
                  </div>
                  <div style="display: flex;margin-top: 10px;">
                    <div>地址：</div>
                    <div>河南省方城县县城体育馆西侧</div>
                  </div>
                  <div style="display: flex;margin-top: 10px;">
                    <div>联系人：</div>
                    <div>韦先生</div>
                  </div>
                  <div style="display: flex;margin-top: 10px;">
                    <div>手机：</div>
                    <div>13782059199</div>
                  </div>
                  <div style="display: flex;margin-top: 10px;">
                    <div>固定电话：</div>
                    <div></div>
                  </div>
                  <div style="display: flex;margin-top: 10px;">
                    <div>邮箱：</div>
                    <div></div>
                  </div>
                 
                </div>
              </div>
           
          </div>

          <!-- <div class="fwb" id="textNotice" v-html="Notice"></div> -->
          <div id="ddd"></div>
        </div>
        <div class="detailsText">
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb">公告正文</div>
          </div>
          <div class="fwb" id="textNotice" v-html="Notice"></div>
          <div id="ddd"></div>
        </div>
       
        <!-- 项目处理进度 -->
        <div class="progress" id="progress">
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb">项目处理进度</div>
          </div>
          <div class="progress-1">
            <div class="Processing" @click="xjcl()">
              <!-- <div style="width: 100%;height: 10px;"></div> -->
              <div class="jiahao">
                <img src="../../assets/img/路径 4197@2x.png" alt="" />
              </div>
              <div class="xj">新建处理</div>
            </div>
            <div style="display: flex; height: 175px" v-for="item in typeList1.value">
              <div class="jiaocha">
                <img src="../../assets/img/交叉 2@2x.png" alt="" />
              </div>
              <div class="cgulList">
                <div class="user">{{ ids.mobile }}</div>
                <div class="cgulList-time">
                  {{ timestamp1(item.createtime) }}
                </div>
                <div class="type" v-if="item.type_status == 3" style="background-color: #ffb430">
                  {{ type_status(item.type_status) }}
                </div>
                <div class="type" v-else-if="item.type_status == 1" style="background-color: #f43107">
                  {{ type_status(item.type_status) }}
                </div>
                <div class="type" v-else>
                  {{ type_status(item.type_status) }}
                </div>
                <div class="beizhu" @click="modify(item)">{{ item.note }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 潜在供应商 -->
        <div class="detailsText">
          <div class="information-top">
            <div style="
                width: 4px;
                height: 16px;
                background-color: #f43107;
                margin-left: 40px;
              "></div>
            <div class="jb" id="tz3">潜在供应商</div>
          </div>
          <!-- <div class="fwb1" id="textNotice" v-html="Notice"></div> -->
          <div class="fwb1"></div>
          <div class="mask">
            <div class="membership searchInfo-1">
              <div class="bgimg"></div>
              <div class="membership-top">开通会员套餐，获取更多商机</div>
              <el-tabs v-model="tabName" type="card" class="demo-tabs" @tab-click="handleClick1">
                <el-tab-pane v-for="item in memberList" :label="item.name" :name="item.name">
                  <template #label>
                    <span class="custom-tabs-label" @click="handleClick(item)">
                      <div class="hy">
                        <img :src="item.url" alt="" />
                      </div>
                      <span>{{ item.name }}</span>
                    </span>
                  </template>
                  <div class="Recharge" v-if="memberId !== 5">
                    <div class="radio">
                      <div class="radio-span">
                        <div class="qian" :class="{ checked: active === 20 }" style="margin-right: 20px"
                          @click="changeStatus(20)">
                          <div class="qian-s">
                            <div class="qian-1">¥</div>
                            <div class="qian-2">{{ putong2 }}</div>
                            <div class="qian-3">/省/年</div>
                          </div>
                          <!-- <div class="qian-ss">加订¥100/省</div> -->
                          <div class="Selected" id="myElement">
                            <img src="../../assets/img/组 4921@2x.png" alt="" />
                          </div>
                        </div>
                        <div class="qian" :class="{ checked: active === 30 }" @click="changeStatus(30)">
                          <div class="qian-s">
                            <div class="qian-1" style="margin-left: -10px">
                              ¥
                            </div>
                            <div class="qian-2">{{ putong1 }}</div>
                            <div class="qian-3">/全国/年</div>
                          </div>
                          <div class="Selected" id="myElement">
                            <img src="../../assets/img/组 4921@2x.png" alt="" />
                          </div>
                        </div>
                      </div>
                      <div class="radio-content">
                        <div class="prompt">
                          <div class="prompt-1">
                            1.开通前请阅读
                            <div class="agreement">《服务协议》</div>
                          </div>
                          <div class="prompt-1">
                            2.请在支付完成后按提示提交开票资料
                          </div>
                        </div>
                        <div class="purchase" @click="Jumpvip()">前往购买</div>
                      </div>
                    </div>
                  </div>
                  <div class="Recharge" v-else style="height: 304px">
                    <div class="radio">
                      <div class="radio">
                        <div class="kfimg">
                          <img :src="kfimg" alt="" />
                        </div>
                        <div class="kf-2">联系专属客服</div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>

        <!-- <div class="suppliers">
        <div class="information-top">
          <div style="
              width: 4px;
              height: 16px;
              background-color: #F43107;
              margin-left: 40px;
            "></div>
          <div class="jb" id="tz1">潜在供应商</div>
        </div>
         <div class="mask">
        <div class="membership searchInfo-1">
          <div class="membership-top">开通会员套餐，获取更多商机</div>
          <el-tabs v-model="tabName" type="card" class="demo-tabs" @tab-click="handleClick1">
            <el-tab-pane v-for="item in memberList" :label="item.name" :name="item.name">
              <template #label>
                <span class="custom-tabs-label" @click="handleClick(item)">
                  <div class="hy">
                    <img :src="item.url" alt="" />
                  </div>
                  <span>{{ item.name }}</span>
                </span>
              </template>
              <div class="Recharge">
                <div class="radio">
                  <div class="radio-span">
                    <div class="qian" style="margin-right:20px " :class="{ checked: active === 10 }" @click="changeStatus(10)">
                      <div class="qian-s">
                        <div class="qian-1">¥</div>
                        <div class="qian-2">298</div>
                        <div class="qian-3">/全国/月</div>
                      </div>
                      <div class="Selected" id="myElement">
                        <img src="../../assets/img/组 4921@2x.png" alt="" />
                      </div>
                    </div>
                    <div class="qian" :class="{ checked: active === 20 }" style="margin-right:20px" @click="changeStatus(20)">
                      <div class="qian-s">
                        <div class="qian-1">¥</div>
                        <div class="qian-2">680</div>
                        <div class="qian-3">/省/年</div>
                      </div>
                      <div class="qian-ss">加订¥100/省</div>
                      <div class="Selected" id="myElement">
                        <img src="../../assets/img/组 4921@2x.png" alt="" />
                      </div>
                    </div>
                    <div class="qian" :class="{ checked: active === 30 }" @click="changeStatus(30)">
                      <div class="qian-s">
                        <div class="qian-1" style="margin-left: -10px;">¥</div>
                        <div class="qian-2">3499</div>
                        <div class="qian-3">/全国/年</div>
                      </div>
                      <div class="Selected" id="myElement">
                        <img src="../../assets/img/组 4921@2x.png" alt="" />
                      </div>
                    </div>

                  </div>
                  <div class="radio-content">
                    <div class="content-left">
                      <div class="content-1" style="margin: 0;">
                      <div class="">六度标讯业务区域：</div>
                      <el-select
                        v-model="value"
                        class="m-2"
                        placeholder=""
                        size="large"
                        style="width: 240px"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                     </div>
                     <div class="content-1">
                      <div class="">已选省份：</div>
                      <div>北京、上海、浙江、安徽、淮北、淮南</div>
                     </div>
                     <div class="content-1">
                      <div class="">开通账号：</div>
                      <div>15855573332</div>
                     </div>
                     <div class="content-1">
                      <div class="">开通套餐：</div>
                      <div>六度·标准版</div>
                     </div>
                     <div class="content-1">
                      <div class="">到期时间：</div>
                      <div>2025-01-29</div>
                     </div>
                     <div class="content-1">
                      <div class="">实付金额：</div>
                      <div style="font-size: 22px;color:#FF4848 ;display: flex;">1180 <div>元</div></div>
                     </div>
                    </div>
                    <div class="content-right"></div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
       
        </div>
      </div>
      </div> -->
        <div class="tk">
          <el-dialog style="height: 350px" v-model="centerDialogVisible" :title="dialogTit" width="800" center>
            <div class="handleType">
              <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon style="height: 150px">
                <el-form-item label="处理状态" prop="type">
                  <div class="zhuangtai" v-if="status_1 == 0">{{ status }}</div>
                  <div class="zhuangtai" v-if="status_1 == 1" :class="{ checked2: active2 === item.type_id }"
                    v-for="(item, index) in typeList" :key="index" @click="typeJump(item)">
                    {{ item.title }}
                  </div>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                  <el-input v-model="ruleForm.note" type="textarea" />
                </el-form-item>
              </el-form>
            </div>

            <template #footer>
              <div class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" v-if="status_1 == 0" @click="qued1()">确定</el-button>
                <el-button type="primary" v-else @click="qued()">确定</el-button>
              </div>
            </template>
          </el-dialog>
        </div>
        <el-dialog style="height: 350px" v-model="centerDialogVisible1" title="" width="1000" class="showAll_dialog"
          center>
          <div class="membership searchInfo-1" style="margin: -25px; position: relative">
            <div class="quxiao" @click="qxVip()">X</div>
            <div class="bgimg"></div>
            <div class="membership-top">开通会员套餐，获取更多商机</div>
            <el-tabs v-model="tabName" type="card" class="demo-tabs" @tab-click="handleClick1">
              <el-tab-pane v-for="item in memberList" :label="item.name" :name="item.name">
                <template #label>
                  <span class="custom-tabs-label" @click="handleClick(item)">
                    <div class="hy">
                      <img :src="item.url" alt="" />
                    </div>
                    <span>{{ item.name }}</span>
                  </span>
                </template>
                <div class="Recharge" v-if="memberId !== 5">
                  <div class="radio">
                    <div class="radio-span">
                      <div class="qian" :class="{ checked: active === 20 }" style="margin-right: 20px"
                        @click="changeStatus(20)">
                        <div class="qian-s">
                          <div class="qian-1">¥</div>
                          <div class="qian-2">{{ putong2 }}</div>
                          <div class="qian-3">/省/年</div>
                        </div>
                        <!-- <div class="qian-ss">加订¥100/省</div> -->
                        <div class="Selected" id="myElement">
                          <img src="../../assets/img/组 4921@2x.png" alt="" />
                        </div>
                      </div>
                      <div class="qian" :class="{ checked: active === 30 }" @click="changeStatus(30)">
                        <div class="qian-s">
                          <div class="qian-1" style="margin-left: -10px">¥</div>
                          <div class="qian-2">{{ putong1 }}</div>
                          <div class="qian-3">/全国/年</div>
                        </div>
                        <div class="Selected" id="myElement">
                          <img src="../../assets/img/组 4921@2x.png" alt="" />
                        </div>
                      </div>
                    </div>
                    <div class="radio-content">
                      <div class="prompt">
                        <div class="prompt-1">
                          1.开通前请阅读
                          <div class="agreement">《服务协议》</div>
                        </div>
                        <div class="prompt-1">
                          2.请在支付完成后按提示提交开票资料
                        </div>
                      </div>
                      <div class="purchase" @click="Jumpvip()">前往购买</div>
                    </div>
                  </div>
                </div>
                <div class="Recharge" v-else style="height: 304px">
                  <div class="radio">
                    <div class="radio">
                      <div class="kfimg">
                        <img :src="kfimg" alt="" />
                      </div>
                      <div class="kf-2">联系专属客服</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-dialog>
      </div>
      <Fot></Fot>
    </div>
  </el-scrollbar>
</template>

<style lang="scss">
.carousel-tit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 30px;
  // padding-left: 2em;
  // text-indent: 2em;
//   text-indent: -2em;
// 　　margin-left: 2em;
}

img {
  width: 100%;
  height: 100%;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
  //  display: flex;
  justify-content: center;

  .details {
    width: 1200px;
    // height: 152px;
    background-color: #fff;
    margin: 10px auto;
  }

  .details-top {
    // width: 100%;
    width: 1200px;
    height: 56px;
    border-bottom: 1px solid #eee;
    line-height: 56px;
    padding-left: 40px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .ioc {
    width: 14px;
    height: 16px;
  }

  .titlesss {
    // width: 100px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    line-height: 50px;
    // padding-left: 6px;
    position: absolute;
    left: 60px;
    top: 4px;
  }

  .daochu {
    // width: 250px;
    height: 16px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    // margin-right: 10px;
    // margin-right: 20px;
    box-sizing: border-box;
  }

  .dc-ioc {
    // width: 33%;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    color: #333333;
    padding-left: 20px;

    img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
      margin-top: 18px;
    }
  }

  .details-conten {
    width: 100%;
    padding: 20px 40px;
    // height: 95px;
  }

  .details-a {
    height: 24px;
    width: 100%;
    // padding-left: 40px;
    display: flex;
    // margin-top: 18px;
    // margin-bottom: 30px;
  }

  .details-tb {
    width: 80px;
    height: 24px;
    border-radius: 4px;
    background: #f43107;
    // margin-top: 17px;
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
    margin-right: 10px;
  }

  .details-js {
    height: 20px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 24px;
    color: #333333;
    opacity: 1;
    // margin:0 0 20px 0;
    // margin-top: 18px;
  }

  .details-b {
    width: 100%;
    height: 14px;
    margin-top: 35px;
    // padding-left: 41px;
    display: flex;
  }

  .sj {
    width: 14px !important;
    height: 14px;
    margin-right: 4px;
    margin-top: -4px;
  }

  .sj-a {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 14px;
    color: #a9b1be;
    opacity: 1;
  }

  .informations {
    width: 1200px;
    height: 255px;
    background-color: #fff;
    margin: 10px auto;
    position: relative;
    /* 确保子元素能够正常显示 */
  }

  .information-top {
    width: 1200px;
    height: 56px;
    padding-top: 20px;
    display: flex;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .jb {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #333333;
    opacity: 1;
    padding-left: 10px;
    margin-top: -2px;
  }

  .feedback {
    // width: 140px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #f43107;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 18px;
    display: flex;
  }

  .table {
    width: 1120px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .table-td {
    width: 100%;
    height: 50px;
    display: flex;
  }

  .td-1 {
    width: 150px;
    height: 50px;
    background: #f5f6fa;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
  }

  .td-2 {
    width: 412px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 50px;
    /* color: #6675FF;
  text-decoration: underline; */
    opacity: 1;
    text-indent: 2em;
    display: flex;

    .td-2-1 {
      width: 18px;
      height: 18px;

      margin-left: -10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .td-2-2 {
      width: 18px;
      height: 18px;
      margin-left: 6px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .xhx {
    text-decoration: underline;
    /* 添加下划线 */
    color: #f43107;
    cursor: pointer;
    /* 修改文本颜色为红色 */
  }

  .detailsText {
    width: 1200px;
    height: auto;
    background-color: #fff;
    margin: 10px auto;
    position: relative;
  }
.detailsTexts{
   width: 1200px;
   height: 700px;
    background-color: #fff;
    margin: 10px auto;
}
  .fwb {
    width: 1120px;
    height: 100%;
    margin: 0 auto;
    padding: 20px 0;

    // padding-bottom: -14px;
    p {
      height: auto;
    }
  }

  .container {
    width: auto;
    height: auto;
    position: relative;
    max-width: 100%;
    /* 确保子元素能够正常显示 */
  }

  .mask {
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1200px !important;
    height: 94%;
    background-color: rgba(246, 246, 246, 0.93);
    z-index: 1;
  }

  //开通会员页面
  .membership {
    // margin-top: 70px;
    width: 1000px;
    height: 540px;
    background: linear-gradient(180deg,
        #f43107 0%,
        rgba(102, 117, 255, 0) 100%) !important;
    margin: 70px auto;
  }

  .membership-top {
    height: 140px;
    padding-top: 25px;
    text-align: center;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 56px;
    color: #fbd49c;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  }

  .searchInfo-1 .el-tabs__content {
    width: 100%;
    box-sizing: border-box;
    // height: 400px;
  }

  .searchInfo-1 .el-tabs--card>.el-tabs__header {
    border: none !important;
    margin-left: 40px;
  }

  .searchInfo-1 .demo-tabs {
    height: 240px;
    margin-top: -30px;
  }

  .searchInfo-1 .el-tabs__header .is-top {
    height: 60px;
    line-height: 40px;
    border: none !important;
  }

  .searchInfo-1 .el-tabs__item.is-active {
    width: 225px;
    height: 60px;
    background: linear-gradient(225deg, #fbcf89 0%, #efd6a8 100%);
    opacity: 1;
    border-radius: 8px 8px 0px 0px;
    margin-top: 0;
  }

  .searchInfo-1 .el-tabs__item {
    width: 225px;
    padding: 0;
    background: linear-gradient(180deg, #515151 0%, #4c4c4c 52%, #3a3a3a 100%);
    opacity: 1;
    border-radius: 8px 8px 0px 0px;
    box-sizing: border-box;
    margin-top: 20px;
    padding-top: 0px;
    padding: 0 !important;
  }

  #tab-second {
    padding: 0;
  }

  .searchInfo-1 .custom-tabs-label {
    display: flex;

    span {
      width: 100px;
      text-align: left;
      margin-top: -20px;
    }

    .hy {
      // margin-left: 20px;
      margin-top: -20px;
      width: 20px;
      height: 20px;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .searchInfo-1 .is-active .custom-tabs-label {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 60px;
    // margin-left: -55px;
    color: #6d4315;
    margin-left: 30px;

    span {
      width: 100px;
      text-align: left;
      margin-top: 0px;
    }

    .hy {
      width: 32px;
      height: 30px;
      margin-top: -4px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .searchInfo-1 .custom-tabs-label {
    // width: 70px;
    text-align: center;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 40px;
    color: #ffffff;
    // margin: 0 auto;
    margin-left: 47px;
  }

  .Recharge {
    width: 900px;
    padding: 30px 70px 30px 70px;
    background: #fff;
    margin-left: 40px;
    // margin-top:4px;
    // width: 980px;
    // background: #f6f6f6;
    // opacity: 1;
    // border-radius: 0px;
    // margin-left: 40px;
    // margin-top: 5px;
  }

  .radio {
    // display: flex;
    // margin-bottom: 20px;
    // justify-content: space-between;

    span {
      width: 150px;
      font-size: 30px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }

    .radio-span {
      display: flex;
      // justify-content:space-between;
      // margin-left: 20px;

      .title1 {
        width: 300px;
        height: 150px;
        border-radius: 8px;
        background-color: #fff;
        margin: 30px 20px 30px 0;
        padding: 0;
        position: relative;
      }

      .checked {
        color: #537cf5;
        // border: 1px solid #537cf5;
        border: 2px solid #f5d3a3;

        .Selected {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 28px !important;
          height: 28px !important;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .yin {
          color: #333333;
        }

        .yin-y {
          color: #d92f2f;
        }

        .tj {
          width: 60px;
          height: 26px;
          // background: #d92f2f;
          opacity: 1;
          border-radius: 8px 0px 8px 0px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 20px;
          color: #ffffff;
          opacity: 1;
          text-align: center;
        }
      }
    }
  }

  .yin {
    width: 100%;
    height: 19px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-align: center;
    margin-top: 10px;
  }

  .yin-y {
    // width: 100%;
    height: 34px;

    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    margin-top: 20px;
    text-align: center;
    display: flex;

    .ms {
      // width: 100%;
      font-size: 18px;
      margin-left: 60px;
    }

    .msjia {
      font-size: 34px;
    }
  }

  .yjia {
    width: 100%;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #acacac;
    opacity: 1;
    text-align: center;
    text-decoration: line-through;
  }

  .tj {
    width: 60px;
    height: 26px;
    background: #fff;
    opacity: 1;
    border-radius: 8px 0px 8px 0px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
    text-align: center;
    // margin-top: 20px;
  }

  .Selected {
    width: 28px;
    height: 28px;
    // display: none;
    position: absolute;
    bottom: 0;
    right: 0;

    img {
      width: 0;
      height: 0;
    }
  }

  .kb {
    margin-top: 20px;
    background-color: #fff;
  }

  .paymentMethod {
    width: 940px !important;
    height: 70px;
    background: #ffffff;
    // opacity: 1;
    border-radius: 8px;
    margin-left: 20px;
    display: flex;
    z-index: 100 !important;
    margin-top: 30px;
    // padding-top: 45px;
  }

  .payment {
    width: 64px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #333333;
    opacity: 1;
    margin: 35px 40px 27px 20px;
  }

  .Method {
    margin-right: 25px;
    width: 180px !important;
    height: 40px;
    background: #ffffff;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 4px;
    display: flex;
    margin-top: 15px;
    position: relative;

    .wx {
      width: 27px;
      height: 24px;
      margin: 8px 0 8px 40px;

      img {
        width: 27px;
        height: 24px;
      }
    }

    .zf {
      margin-left: 5px;
      margin-top: 10px;
    }

    .wx-1 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px;
      height: 20px;

      img {
        width: 0;
        height: 1;
      }
    }
  }

  .checked1 {
    background: #fefaf2;
    border: 1px solid #f5d3a3;

    .wx-1 {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px !important;
      height: 20px !important;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .Deduction {
    margin-left: 20px;
    margin-top: 30px;
    display: flex;
    height: 45px;
    width: 1140px;

    .el-input {
      margin-top: 10px;
      width: 250px;
      height: 40px;
    }

    .button-1 {
      margin-top: 10px;
      margin-left: 10px;
      width: 80px;
      height: 40px;
      background: #f43107;
      opacity: 1;
      border-radius: 4px;
    }

    .button-2 {
      margin-left: 10px;
      width: 180px;
      height: 60px;
      background: linear-gradient(360deg,
          #f43107 0%,
          #8995ff 51%,
          #f43107 100%);
      opacity: 1;
      border-radius: 4px;

      span {
        width: 88px;
        height: 22px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #ffffff;
        opacity: 1;
        // margin-left:60px
      }
    }

    .successful {
      width: 80px;
      margin-top: 28px;
      margin-left: 25px;
      margin-right: 85px;
      width: 171px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #333333;
      opacity: 1;
    }

    .yj {
      margin-top: 28px;
      width: 115px;
      // margin-right:20px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #acacac;
      opacity: 1;
      text-decoration: line-through;
    }

    .successful-1 {
      width: 50px;
      margin-top: 28px;
      margin-left: 200px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #333333;
      opacity: 1;
    }

    .successful-2 {
      width: 100px;
      margin-top: 28px;
      margin-left: 0;
      font-size: 24px;

      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #d92f2f;
      opacity: 1;
    }
  }

  // .memberships-bottom {
  //   display: flex;
  //   justify-content: space-between;
  //   padding-top: 25px;
  //   width: 1080px;
  //   height: 20px;
  //   margin: 0 auto;
  // }

  .el-radio__inner {
    border-radius: 2px !important;
  }

  .el-radio__input.is-checked .el-radio__inner::after {
    content: "";
    width: 8px;
    height: 3px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }

  .bottom-1 {
    margin-top: 17px;
    width: 256px;
    height: 16px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 0px;
    color: #d92f2f;
    opacity: 1;
  }

  .el-radio__label {
    display: flex;
  }

  .container .tabs {
    width: 1200px;
    height: 56px;
    padding: 0 40px;
    margin: 10px auto;
    background-color: #fff;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1000;
    // margin-bottom: 10px;
  }

  .el-tabs__nav-wrap::after {
    height: 0px;
  }

  // :deep(){
  .el-textarea__inner {
    width: 93%;
    height: 80px;
  }

  .tiaozhuan .el-tabs {
    .el-tabs__active-bar {
      background-color: #f43107;
    }

    .is-active {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 20px;
      color: #f43107;
      opacity: 1;

      a {
        color: #f43107;
      }
    }

    .el-tabs__nav-wrap::after {
      height: 0px;
    }

    .el-tabs__content {
      display: none;
    }

    .el-tabs__header {
      height: 56px;
    }

    .el-tabs__nav-scroll {
      height: 56px !important;
    }

    .el-tabs__item {
      height: 56px;
      font-size: 16px !important;

    }

    .el-tabs__nav-scroll::after {
      height: 0 !important;
    }
  }

  // }

  .progress {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    height: 252px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .schedule {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    // height: 252px;
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .Processing {
    width: 80px !important;
    height: 60px;
    background: #f43107;
    opacity: 1;
    border-radius: 8px;
    margin-top: 68px;
    margin-left: 40px;
    padding-right: 60px;
  }

  .progress-1 {
    display: flex;
  }

  .jiahao {
    width: 22px;
    height: 22px;
    margin-left: 30px;
    margin-top: 10px;

    // margin-top: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .xj {
    width: 80px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #ffffff;
    opacity: 1;
    text-align: center;
  }

  .cgulList {
    width: 208px;
    height: 156px;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    opacity: 1;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px;
  }
  .cgulList-time {
    height: 12px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-top: 11px;
  }

  .type {
    width: 66px;
    height: 24px;
    background: #eeeeee;
    opacity: 1;
    border-radius: 4px;
    margin-top: 11px;
    text-align: center;
    line-height: 24px;
  }

  .beizhu {
    width: 168px;
    height: 32px;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
    margin-top: 10px;
    background-color: #f8f8f8;
  }

  .jiaocha {
    width: 22px;
    height: 24px;
    margin: 86px 14px 0 14px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .zhuangtai {
    width: 70px;
    height: 20px;
    background-color: #f6f6f6;
    border-radius: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 20px;
  }

  .checked2 {
    width: 70px;
    height: 20px;
    background-color: #f2a52b;
    border-radius: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 20px;
  }
  .dialog-footer {
    margin-top: -250px;
  }

  .ywlj {
    width: 154px;
    height: 14px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    line-height: 20px;
    color: #f43107;
    text-decoration: underline;
    opacity: 1;
    margin-right: 10px;
    cursor: pointer;
  }


  .qian {
    width: 370px;
    height: 100px;
    background: #ffffff;
    border: 1px solid #dddddd;
    opacity: 1;
    border-radius: 8px;
    position: relative;
    // display:flex;
  }

  .qian-1 {
    // width: 10px;
    // height: 24px;
    font-size: 20px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
  }

  .qian-2 {
    // width: 49px;
    // height: 40px;
    font-size: 34px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 20px;
    color: #ff4848;
    opacity: 1;
  }

  .qian-3 {
    // width: 61px;
    // height: 17px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 20px;
    color: #a9b1be;
    opacity: 1;
  }
.qian-s{
    width: 100%;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

  .radio-content {
    width: 100%;
  }

  .content-left {
    width: 500px;
    margin-right: 20px;
  }

  .content-1 {
    width: 500px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 20px;
  }

  .content-right {
    width: 240px;
    height: 210px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 8px;
  }

  a {
    color: #a9b1be;
  }

  a:hover {
    color: #f43107;
  }

  .tiaozhuan .el-tabs__item a {
    height: 56px;
    width: 100%;
    line-height: 56px;
  }

  .bgimg {
    width: 1000px;
    height: 214px;
    position: absolute;
    top: 70px;
    background: url("../../assets/img/蒙版组\ 376@2x.png");
    background-repeat: no-repeat;
    /* 不重复 */
    background-position: center center;
    /* 居中 */
    background-size: cover;
  }

  .prompt {
    margin-top: 20px;
    width: 760px;
    height: 34px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    opacity: 1;
    border-radius: 4px;
    display: flex;
    margin-bottom: 30px;
  }

  .prompt-1 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 34px;
    color: #a9b1be;
    display: flex;
    margin-left: 20px;

    .agreement {
      color: #f43107;
    }
  }

  .purchase {
    width: 180px;
    height: 60px;
    background: linear-gradient(360deg, #f43107 0%, #f28e79 51%, #f43107 100%);
    opacity: 1;
    border-radius: 4px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 22px;
    text-align: center;
    line-height: 60px;
  }

  .fwb1 {
    min-height: 790px;
  }
}

.carousel-box {
  // width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 124px;
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 100px;
  display: inline-block;
  margin-top: 20px;
  margin-left: 50px;
  position: relative;
  padding: 20px 0;
}

.carousel {
  width: 1200px;
  height: 164px;
  // padding: 0 50px;
  display: flex;
}

.imgss {
  position: absolute;
  right: -40px;
  top: 50px;
  width: 26px;
  height: 20px;

  // margin: 0 20px;
  img {
    width: 100%;
    height: 100%;
  }
}

.lastOne {
  position: absolute;
  right: -45px;
  width: 26px;
  height: 20px;

  img {
    width: 0%;
    height: 0%;
  }
}

.carousel-time {
  // width: 72px;
  height: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #a9b1be;
  line-height: 20px;
  text-align: center;
  margin: 10px 0;
}

.carousel-tit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  text-align: center;
}

.carousel-infoid {
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 16px;
  color: #f43107;
  line-height: 20px;
  text-align: center;
}

// :deep(){
// .el-carousel--horizontal {
//   width: 1200px !important;
//   height: 164px !important;
// }
// .el-carousel__container{
//   width: 1200px !important;
//   height: 164px !important;
// }
// }
#ddd {
  position: absolute;
  bottom: 0px;
  height: 60px;
  width: 1px;
  // z-index: 0;
  // margin-top: -40px;
}

::-webkit-scrollbar-thumb {
  background-color: #999;
  /* 设置滑块的背景颜色 */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #666;
  /* 设置滑块的背景颜色 */
}

.showAll_dialog {
  height: 650px !important;
}

.showAll_dialog .el-dialog__header {
  display: none;
}

.quxiao {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  color: #000;
}

.kfimg {
  width: 200px;
  height: 200px;

  img {
    width: 100%;
    height: 100%;
    margin-left: 270px;
    // margin-top: 100px;
  }
}

.kf-2 {
  // width: 96px;
  height: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #713202;
  text-align: center;
  margin-top: 20px;
  // line-height: 61px;
}

.vip_gg {
  margin: 0 40px;
}

.vip_gz {
  margin-top: 20px;
  font-size: 14px;
}

.vip_top1 {
  // margin: 0 40px;
  display: flex;
  flex-wrap: wrap;
}

.vip_top2 {
  width: 25%;
  border: 1px solid #eee;
  height: 50px;
  margin-top: 20px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;

}

.vip_top3 {
  width: 50%;
  display: flex;
}

.td-3 {
  width: 974px;
  height: 70px;
  background: #FFFFFF;
  border-radius: 0px;
  border: 1px solid #EEEEEE;
}
</style>
